<template>
  <div>
    <div class="box">
      <div class="header">
        <span>姓名 ：</span>
        <div class="inp">
          <input
            type="text"
            placeholder="请输入会员昵称.手机号"
            v-model="shaixuan"
            @change="inp(shaixuan)"
          />
        </div>
      </div>
      <div class="mian">
        <span :class="index == 0 ? 'active' : 'mian_nav'" @click="list(0)"
          >会员列表</span
        >
        <span :class="index == 1 ? 'active' : 'mian_nav'" @click="shanchu(1)"
          >回收站</span
        >
        <span class="mian_add" @click="dialogVisible = true">添加会员</span>
      </div>
      <div class="footer">
        <el-table :data="dataList" border style="width: 100%">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            fixed
            align="center"
            prop="id"
            label="用户ID"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            align="center"
            label="用户昵称"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="Phonenumber"
            label="手机号"
            align="center"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="password"
            label="密码"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="record"
            label="购买记录"
            align="center"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="time"
            label="上次购买时间"
            align="center"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="zip"
            label="账户禁用"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.switch"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
                ></el-switch
              >
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="left" label="操作" width="300">
            <template slot-scope="scope">
              <el-button @click="textClick(scope.row)" type="text" size="small"
                >编辑</el-button
              >
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                v-if="ind === 1"
                >删除</el-button
              >
              <el-button
                @click="huifuClick(scope.row)"
                type="text"
                size="small"
                v-if="ind === 0"
                >恢复</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.pageIndex"
            :limit.sync="listQuery.pageSize"
          />
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30%">
      <p class="prim">
        姓名:<input
          type="text"
          class="mary"
          placeholder="请输入用户名"
          v-model="name"
        />
      </p>
      <p class="prim">
        手机号:<input
          type="text"
          placeholder="请输入手机号"
          v-model="cellphone"
        />
      </p>
      <p class="prim">
        密码:<input
          type="password"
          class="mary"
          placeholder="请输入密码"
          v-model="password"
        />
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ible()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVi" width="30%">
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ble()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import {addlist,memderlist,memdercompile,memberremove} from "../../api/menberList"
import { store } from "../../store/index";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("vip");
import pagination from "@/components/Pagination";
export default {
  data() {
    return {
      listLoading: false,
      total: 0,
      listQuery: {
        //控制页码
        pageIndex: 0,
        pageSize: 2,
      },
      index: 0, //控制teb切换
      ind: 1, //控制删除恢复
      dialogVisible: false, //添加会员弹框
      dialogVi: false, //编辑会员弹框
      data: [], //所有会员信息
      dataList: [], //会员信息
      shaixuan: "", //v-modul
      name: "", //添加姓名
      cellphone: "", //添加手机号
      password: "", //添加密码
    };
  },
  components: {
    pagination,
  },
  created() {
    // axios.get("/list").then(({ data }) => {
    //   this.data = data;
    //   this.dataList = data.filter(item=>item.situation===0)
    //   this.dataList.length=this.total
    // });
    memderlist({}).then((res)=>{
       console.log(res);
    })
    this.data = this.vipdata;
    this.dataList = this.data.filter((item) => item.situation === 0);
    this.getList();
  },
  computed: {
    ...mapState({
      vipdata: (state) => state.vipdata,
    }),
  },
  methods: {
    getList(val) {
      console.log(val);
      this.listLoading = true;
      this.total = 100;
      this.listLoading = false;
    },
    //回收站
    shanchu(val) {
      this.index = val;
      this.ind = 0;
      this.dataList = this.data.filter((item) => item.situation === 1);
    },
    //列表
    list(val) {
      this.index = val;
      this.dataList = this.data.filter((item) => item.situation === 0);
      this.ind = 1;
    },
    //删除会员
    handleClick(i) {
      this.dataList.forEach((item, index) => {
        if (item == i) {
          let att = this.dataList.splice(index, 1);
          item.situation = 1;
        }
      });
    },
    //恢复会员
    huifuClick(i) {
      this.dataList.forEach((item, index) => {
        if (item == i) {
          this.dataList.splice(index, 1);
          item.situation = 0;
        }
      });
    },
    //添加会员
    async ible() {
      this.dialogVisible = false;

      let obj = {
        id: "000112",
        name: this.name,
        Phonenumber: this.cellphone,
        time: "2020.03.01 15:30",
        switch: true,
        password: this.password,
      };
      let res = await addlist(obj);
      console.log(res);
      this.name = "";
      this.cellphone = "";
      this.password = "";
    },

    //筛选搜索
    inp(i) {
      console.log(i);
      this.index = 0;
      if (i !== "") {
        this.dataList = this.data.filter(
          (item) =>
            item.name == this.shaixuan || item.Phonenumber == this.shaixuan
        );
      } else {
        this.dataList = this.data;
      }
    },
    add() {
      this.index = 0;
      console.log(this.shaixuan);
      this.dataList = this.data.filter(
        (item) =>
          item.name == this.shaixuan || item.Phonenumber == this.shaixuan
      );
    },
    //编辑
    textClick(u) {
      this.dialogVi = true;
      console.log(u);
    },
    //取消编辑
    ble() {
      this.dialogVi = false;
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.prim {
  width: 100%;
  margin: 0 auto;
  margin-top: 30px;
  text-indent: 50px;
  font-size: 20px;
}
.prim > input {
  width: 200px;
  height: 34px;
  text-indent: 1em;
}
.header {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  text-indent: 20px;
}
.inp {
  width: 230px;
  height: 34px;
  border: 1px solid #efefef;
  display: flex;
  border-radius: 5px;
}
.inp > input {
  width: 180px;
  height: 32px;
  padding: 2px 0;
  border: none;
  outline: 0;
  text-indent: 10px;
}
.mian {
  width: 97%;
  height: 80px;
  border-bottom: 1px solid #ececec;
  line-height: 80px;
  margin: 0 auto;
}
.el-button + .el-button {
  margin-left: 60px;
}
.mian_nav {
  margin-left: 20px;
  display: inline-block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}
.mian_add {
  float: right;
  width: 150px;
  height: 30px;
  border-radius: 5px;
  line-height: 30px;
  margin-top: 25px;
  margin-right: 20px;
  background-color: #38a28a;
  color: aliceblue;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}
.active {
  width: 100px;
  height: 30px;
  margin-left: 20px;
  padding-bottom: 60px;
  font-size: 14px;
  display: inline-block;
  text-align: center;
  color: red;
  border-bottom: 5px solid #38a28a;
}
.nav {
  width: 50%;
  height: 50%;
  background-color: red;
  position: absolute;
  left: 25%;
  top: 25%;
  z-index: 1;
}
.footer {
  width: 98%;
  margin: 0 auto;
}
</style>
